<template>
	<view class="message">
		<view class="text-message">
			<view v-html="message.payload.text" v-if="!message.lastMessage"></view>
			<span v-for="(v, p) in message.lastMessage" :key="p"
				v-if="message.lastMessage">
				<span v-if="v.name === 'span'">
					<view v-html="v.text"></view>
					<block v-if="message.cloudCustomData">
						<text>{{ message.cloudCustomData }}</text>
					</block>
				</span>
				<image class="emote" v-if="v.name === 'img'" :src="v.src" />
			</span>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		message: {
			type: Object,
			default: {}
		}
	})
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}
	
	.message {
		flex: 1;
		font-size: 26rpx;
		text-align: left;
		width: fit-content;
		word-break: break-all;
		padding: 24rpx;
		background-color: #E4F0FE;
	
		.text-message {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			white-space: pre-wrap;
		}
		
		.emote {
			width:40rpx;
			height:40rpx;
		}
	}
</style>